<template>
  <div class="dischargeStatistics">
    <div class="title"></div>

    <div class="warp">
      <div class="itemTitle">
        <div class="enterpriseName">企业名称</div>
        <div class="siteName">站点名称</div>
        <div class="outlet">排口</div>
      </div>
      <div class="content">
        <div class="items" v-for="item in dischargeOutletList" :key="item">
          <div class="enterpriseName">{{ item.enterpriseName || '' }}</div>
          <div class="siteName">{{ item.subname || '' }}</div>
          <div class="outlet">{{ item.itemName || '' }}</div>
        </div>
        <div class="mt20 font_color_blue" v-if="!dischargeOutletList.length">暂无数据</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DischargeStatistics',
  data() {
    return {
      dischargeOutletList: []
    }
  },
  created() {
    this.getDischargeOutlet()
  },
  methods: {

    async getDischargeOutlet() {
      const res = await this.$http.get('/screenData/getDischargeOutlet')
      if (res.code == '200') {
        this.dischargeOutletList = res.data
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dischargeStatistics {
  width: 100%;
  height: 700px;
  background: url(../../../assets/images/screen/dischargeTj.png) no-repeat;
  background-size: 100% 100%;
  position: relative;

  .title {
    width: 100%;
    max-width: 400px;
    height: 50px;
    background: url(../../../assets/images/screen/title2.png) no-repeat;
    background-size: 100% 100%;

    position: absolute;
    top: -22px;
    left: 50%;
    transform: translate(-50%, 0);
  }

  .warp {
    width: 100%;
    height: 100%;
    padding: 30px 10px 20px 10px;

    .itemTitle {
      width: 100%;
      padding: 10px;
      background: #061553;
      opacity: 0.62;
      border-radius: 6px;
      display: flex;
      justify-content: flex-start;
      flex-wrap: nowrap;
      color: #8AFBFF;
      text-align: center;

      .enterpriseName {
        width: 50%;
      }

      .siteName {
        width: 30%;
      }

      .outlet {
        width: 20%;
      }
    }

    .content {
      width: 100%;
      height: 95%;
      overflow: auto;
      text-align: center;

      .items {
        width: 100%;
        padding: 10px;
        background: rgba(93, 156, 234, 0.55);
        border-radius: 6px;
        margin-top: 10px;
        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;
        color: #FFFFFF;

        .enterpriseName {
          width: 50%;
        }

        .siteName {
          width: 30%;
        }

        .outlet {
          width: 20%;
        }
      }

    }
  }
}
</style>
